<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model="listQuery.nickname"
        clearable
        placeholder="请输入用户昵称"
      />
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div style="margin:10px 0">
      <el-button type="primary" @click="createOrder">创建补单</el-button>
      <el-button type="warning" @click="onHandleAll(0)">批量补单</el-button>
      <el-button type="danger" @click="onHandleAll(1)">批量删除</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="用户ID" prop="targetUserId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.targetUserId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickname" />
        <el-table-column align="center" label="创建时间">
          <template slot-scope="{ row }">{{ row.createTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="补单类型">
          <template slot-scope="{ row }">{{ methodType(row.type) }}</template>
        </el-table-column>
        <el-table-column align="center" label="礼物id">
          <template slot-scope="{ row }">{{ row.giftId }}</template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="{ row }">{{ row.note }}</template>
        </el-table-column>
        <el-table-column align="center" label="补单时间">
          <template slot-scope="{ row }">{{ row.updateTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="{ row }">{{
            row.status | filterType
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="160">
          <template v-if="row.status === 0" slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="onVerifyRow(row, 0)"
            >通过</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="onVerifyRow(row, 1)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      :visible="dialogVisible"
      title="补单"
      @close="dialogVisible = false"
    >
      <el-form
        ref="formdata"
        :rules="rules"
        :model="formData"
        label-width="80px"
      >
        <el-form-item label="账户：" prop="userIds">
          <el-input
            v-model="formData.userIds"
            type="textarea"
            placeholder="填写用户ID，一行一个"
          />
        </el-form-item>
        <el-form-item label="补单类型" prop="type">
          <el-select v-model="formData.type">
            <el-option
              v-for="item in type"
              :key="item.key"
              :value="item.key"
              :label="item.text"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.type === 6" label="礼物id:" prop="giftId">
          <el-input-number
            v-model="formData.giftId"
            :min="1"
            :step="1"
            step-strictly
            placeholder="请输入礼物ID"
          />
        </el-form-item>
        <el-form-item label="数量：" prop="num">
          <el-input-number
            v-model="formData.num"
            type="number"
            placeholder="请输入数量"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="note">
          <el-input
            v-model="formData.note"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import giftArr from '@/utils/gift'
import {
  xhrSupplementList,
  xhrSupplementCreate,
  xhrSupplementDelete
} from '@api/account'
export default {
  name: 'Supplement',
  components: { TablePagination },
  filters: {
    filterType(type) {
      const typeDict = {
        0: '创建成功',
        1: '补单成功',
        '-1': '删除'
      }
      return typeDict[type]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        userId: null,
        nickname: null,
        page: 1,
        limit: 10
      },
      daterangeValue: '',
      selectRows: [],
      dialogVisible: false,
      giftArr,
      type: [
        { key: 1, text: '非奖励积分' },
        { key: 2, text: '积分值' },
        { key: 3, text: '魅力值' },
        { key: 4, text: '土豪值' },
        { key: 5, text: '私聊券' },
        { key: 6, text: '礼物' },
        { key: 7, text: '视频卡' },
        { key: 8, text: '钻石' },
        { key: 9, text: '语音卡' },
        { key: 10, text: '福气卡' },
        { key: 11, text: '魅力分' }
      ],
      // dialog数据
      formData: {
        giftId: null,
        num: null,
        userIds: null,
        type: null,
        note: null
      },
      rules: {
        userIds: [{ required: true, message: '不能为空' }],
        type: [{ required: true, message: '不能为空' }],
        num: [{ required: true, message: '不能为空' }],
        giftId: [{ required: true, message: '不能为空' }],
        note: [{ required: true, message: '不能为空' }]
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      xhrSupplementList(this.listQuery)
        .then(resp => {
          this.list = resp.data.addOrderInfoList
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    handleSelectionChange(rows) {
      this.selectRows = rows
    },
    createOrder() {
      this.dialogVisible = true
    },
    handleCreate() {
      this.$refs.formdata.validate(valid => {
        if (valid) {
          const userIds = this.formData.userIds.split('\n')
          const p = Object.assign({}, this.formData, { userIds })
          xhrSupplementCreate(p).then(resp => {
            if (resp.message === 'ok') {
              this.$refs.formdata.resetFields()
              this.dialogVisible = false
              this.doSearch()
            }
          })
        }
      })
    },
    onHandleAll(status) {
      if (!this.selectRows.length) {
        this.$message.warning('请选择一条数据')
      } else {
        const params = this.generateParams(this.selectRows, status)
        this.onVerify(params, status, true)
      }
    },
    generateParams(rows, status) {
      const orderIds = []
      rows.forEach(row => {
        orderIds.push(row.orderId)
      })
      return {
        operateType: status,
        orderIds
      }
    },
    onVerifyRow(row, status) {
      const params = this.generateParams([row], status)
      this.onVerify(params, status)
    },
    onVerify(params, status, isBatch) {
      let title = status === 0 ? '通过' : '删除'
      title = isBatch ? '批量' + title : title
      this.$confirm('确定' + title + '？').then(() => {
        xhrSupplementDelete(params)
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    },
    methodType(type) {
      if (type > 0) {
        const i = type - 1
        return this.type[i].text
      } else {
        return '未知类型'
      }
    }
  }
}
</script>
